<script setup>
import { ref, reactive } from "vue"
import zhuanshi from "./img/zhuanshi.png"
import zhuanshi1 from "./img/zhuanshi1.png"
import zijin from "./img/zijin.png"
import zijin1 from "./img/zijin1.png"
import up from "./img/up.png"
import up1 from "./img/up1.png"
import tool from "./img/tool.png"
import tool1 from "./img/tool1.png"
import chengben from "./img/chenben.png"
import chengben1 from "./img/chenben1.png"
import caiwu from "./img/caiwu.png"
import caiwu1 from "./img/caiwu1.png"
// import { rowContextKey } from "element-plus"
let text1 = reactive([

    { p: "九年沉淀 品质服务", url: zhuanshi, url1: zhuanshi1, url2: zhuanshi },
    { p: "车型可随时更新", url: up, url1: up1, url2: up },
    { p: "解除维修及年检烦恼", url: tool, url1: tool1, url2: tool },
    { p: "提高资金利用率", url: zijin, url1: zijin1, url2: zijin },
    { p: "保证财政状态良好", url: caiwu, url1: caiwu1, url2: caiwu },
    { p: "减少成本降低浪费", url: chengben, url1: chengben1, url2: chengben },

])
function into(arg) {
    for (let i = 0; i < text1.length; i++) {
        if (i == arg) {
            text1[i].url = text1[i].url1
        }
        text1[arg].url = text1[arg].url1
    }
}
function outto(index) {
        for (let j = 0; j < text1.length; j++) {
            if (j == index) {
                text1[j].url = text1[j].url2
            }
        }

    }
</script>
<template>
    <div class="you_zong">
        <div class="you-Head">
            <h2>蓉之风优势 </h2>
            <div class="you_hr"></div>
            <p>客户是生命、安全是保障、服务是根本、专业铸品质</p>
        </div>
        <ul>
            <li v-for="(item,index) in text1" @mouseenter="into(index)" @mouseleave="outto(index)">
                <img :src="item.url" alt="url" />
                <p class="you_text"> {{item.p}}</p>
                <p class="number">0{{index+1}}</p>
            </li>
        </ul>
    </div>
</template>
<style lang="scss"  scoped>
.you_zong {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 30px;
    background-color: rgb(242, 244, 248);

    .you-Head {
        margin-bottom: 30px;
        text-align: center;

        h2 {
            font-size: 30px;
            color: #333333;
            font-weight: normal;
        }

        .you_hr {
            width: 54px;
            height: 3px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 15px;
            background-color: #db2534;
        }

        p {
            margin-top: 12px;
            font-size: 16px;
            line-height: 22px;
            color: #999999;
        }
    }

    ul {
        display: flex;
        justify-content: space-between;
        margin: 0 40px;

        li {
            list-style: none;
            width: 200px;
            height: 194px;
            padding-top: 26px;
            text-align: center;
            font-size: 16px;
            color: #333333;

            .you_text {
                margin-top: 24px;
                margin-bottom: 24px;
                line-height: 22px;
            }

            .number {
                font-size: 48px;
                font-family: "Calibri", Arial, sans-serif;
                color: #db2534;
            }

        }
        li:hover {
            color: white;
            .number{
                color: white;   
            }
            background-image: url("./img/you_bei1.jpg");

        }
    }

}

// 219, 37, 52
</style>